<template>
  <div class="verifyCodeLogin">
    <!--手机号-->
    <div class="iphoneNo">
      <Input
        type="text"
        v-model="iphoneNo"
        placeholder="请输入手机号"
        size="large"
        clearable
        prefix="ios-contact-outline"/>
    </div>
    <!--验证码盒子-->
    <div class="box">
      <!--验证码输入框-->
      <div class="input">
        <Input
          type="text"
          v-model="verifyCode"
          placeholder="验证码"
          size="large"
          clearable
          prefix="ios-lock-outline"
          @on-enter="enter"/>
      </div>
      <div class="button">
        <!--获取验证码-->
        <div v-if="verifyCodeButtonFlag">
          <Button
            html-type="button"
            style="background-color: #19be6b;
                          color: #FFFFFF;
                          width: 110px;
                          height: 40px"
            @click="getSmsCode">
            {{verifyCodeTip}}
          </Button>
        </div>
        <!--重新获取验证码-->
        <div v-else="!verifyCodeButtonFlag">
          <Button
            html-type="button"
            style="border:1px solid #DDDDDD;
                          background-color: #FFFFFF;
                          color: #B1B1B1;
                          font-size: 16px;
                          width: 110px;
                          height: 40px;">
            {{countDown}}秒后重发
          </Button>
        </div>
      </div>
    </div>

    <!--登录按钮-->
    <div class="loginButton">
      <Button
        type="success"
        size="large"
        html-type="button"
        style="width: 100%"
        @click="login">
        登录
      </Button>
    </div>

    <!--去注册-->
    <div class="register">
      <div>
        <div @click="intoRegister">去注册 ></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    checkStrIsNull,
    checkIphoneNo
  } from "@/tools/checkAccount";
  import {
    setCookie
  } from "@/tools/cookie";
  import Bus from "@/tools/bus"

  export default {
    name: "",
    components: {},
    data() {
      return {
        //手机号
        iphoneNo: "",
        //验证码
        verifyCode: "",
        //获取验证码提示
        verifyCodeTip: "获取验证码",
        //发送验证码按钮切换
        verifyCodeButtonFlag: true,
        //重新发送倒计时
        countDown: 30,
        //定时器
        c: null,
        //消息提示
        msg: ""
      }
    },
    methods: {
      checkIphoneNo: function () {
        if (this.iphoneNo == "") {
          this.$Notice.error({
            title: "请输入手机号"
          });
          return false;
        } else if (!checkIphoneNo(this.iphoneNo)) {
          this.$Notice.error({
            title: "手机号格式非法"
          });
          return false;
        }
        return true;
      },
      checkCode: function () {
        if (this.verifyCode == "") {
          this.$Notice.error({
            title: "请输入验证码"
          });
          return false;
        }
        return true;
      },
      //获取短信验证码
      getSmsCode: function () {
        let b = this.checkIphoneNo();
        if (!b) {
          return false;
        }
        //发送短信验证码
        this.axios.get(`/login/login/verifyCode/${this.iphoneNo}`)
          .then(resp => {
            //成功回调
            if (resp.data.flag) {
              this.$Notice.success({
                title: "请查收短信"
              });
            }
            //
            if (!resp.data.flag) {
              if (resp.data.code == 20002) {
                this.$Notice.error({
                  title: "该账号还未注册或绑定"
                });
                this.$router.push("/register");
              }
            }
          })
        //设置按钮提示
        this.verifyCodeButtonFlag = false;
        this.c = setInterval(() => {
          this.countDown--;
          //当计数为0时，回复初始状态
          if (this.countDown == 0) {
            this.countDown = 30;
            this.verifyCodeButtonFlag = true;
            clearInterval(this.c);
          }
        }, 1000)
      },
      enter: function () {
        this.login()
      },
      //登录
      login: function () {
        //校验手机号和验证码是否为空
        let b1 = this.checkIphoneNo();
        let b2 = this.checkCode();
        if (!b1 || !b2) {
          return false;
        }
        this.axios.get(`/login/login/login/${this.iphoneNo}/${this.verifyCode}`)
          .then(resp => {
            //错误提示
            if (!resp.data.flag) {
              if (resp.data.code == 20002) {
                this.$Notice.error({
                  title: "该账号还未注册"
                });
              } else {
                this.$Notice.error({
                  title: "登录失败，请重试"
                });
              }
            }
            //成功返回
            if (resp.data.flag) {
//######################################################################################
              //响应数据
              let respData = resp.data.data;
              //设置本地token
              let token = respData.token;
              //设置本地用户
              let webUser = respData.webUser;
              //将后台的数据前端本地化，后台修改字段，前台只要修改这里即可
              let user = {
                userId: webUser.webUserId,
                userName: webUser.userName,
                iphoneNo: webUser.iphoneNo,
                userEmail: webUser.userEmail,
                headPortrait: webUser.headPortrait,
              }
              //将用户对象信息 字符串化
              let userInfo = JSON.stringify(user);
              //存到本地
              window.sessionStorage.setItem("isLogin", true);
              window.sessionStorage.setItem("token", token);
              window.sessionStorage.setItem("userInfo", userInfo);

              //保存到cookie
              setCookie("isLogin", true);
              setCookie("token", token);
              setCookie("userInfo", userInfo);

              //存到Vuex
              this.Store.commit("setIsLogin", true);
              this.Store.commit("setToken", token);
              this.Store.commit("setUserInfo", userInfo);
              this.Store.commit("setUserId", user.userId);
              //刷新 app
              Bus.$emit("my-event-app-load", true);
              //跳转到首页
              this.$router.push("/");
//######################################################################################
            }
          })
      },
      //去注册
      intoRegister: function () {
        this.$router.push("/register");
      }
    },
    beforeDestroy() {
      //离开页面清理定时器
      clearInterval(this.c);
    }
  }
</script>

<style scoped>
  /*盒子设置*/
  .verifyCodeLogin {
    width: 94%;
    margin: 14px auto 0px;
  }

  /*验证码 box*/
  .verifyCodeLogin .box {
    margin-top: 14px;
  }

  /*验证码输入框*/
  .verifyCodeLogin .box .input {
    float: left;
    width: 176px;
  }

  /*验证码按钮*/
  .verifyCodeLogin .box .button {
    float: right;
  }

  /*登录按钮*/
  .verifyCodeLogin .loginButton {
    margin-top: 72px;
  }

  /*去注册*/
  .verifyCodeLogin .register div {
    height: 40px;
  }

  /*去注册*/
  .verifyCodeLogin .register div div {
    height: 20px;
    width: 66px;
    float: right;
    font-size: 14px;
    line-height: 20px;
    color: #FF0000;
    text-align: right;
    margin-top: 14px;
    padding-right: 4px;
  }
</style>
